<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩票摇奖</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 30px;
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .container {
            width: 100%;
            text-align: center;
        }

        .btn {
            padding: 10px 50px;
            border-radius: 8px;
            display: inline-block;
            color: #ffffff;
            cursor: pointer;
        }

        .BichromaticSphere {
            background: tomato;
        }

        .BigLotto {
            background: rgb(236, 8, 8);
        }

        .slot {
            width: 100%;
            padding: 20px;
            border-top: 2px solid #aaaaaa;
            border-bottom: 2px solid #aaaaaa;
            margin: 20px 0;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="btn BichromaticSphere" onclick="getLottery('BichromaticSphere')">双色球</div>
        <div id="slot" class="slot">&nbsp;</div>
        <div class="btn BigLotto" onclick="getLottery('BigLotto')">大乐透</div>
    </div>
    <script>
        let _redList = [];
        let _blueList = [];
        let reds = [];
        let blues = [];
        let snapshotList = [];

        // 在一个范围中产生随机数
        function selectRandom(start, end) {
            const total = end - start + 1;
            return Math.floor(Math.random() * total + start);
        }
        // 格式化小于10的数字
        function format(list) {
            const _list = [];
            for (let i = 0; i < list.length; i++) {
                const element = list[i];
                _list.push(element > 9 ? element : '0' + element);
            }
            return _list;
        }
        // 随机选择号码
        function drawLottery(type, list, size) {
            const index = selectRandom(0, list.length - 1);
            snapshotList.push(list[index]);
            if (snapshotList.length < size) {
                list.splice(index, 1);
                drawLottery(type, list, size);
            } else {
                if (type === 'red') {
                    reds = snapshotList;
                    snapshotList = [];
                } else if (type === 'blue') {
                    blues = snapshotList;
                    snapshotList = [];
                }
            }
        }
        // 根据类型生成不同的彩票类型
        function getLottery(type) {
            _redList = [];
            _blueList = [];
            if (type === 'BichromaticSphere') {
                for (let i = 1; i <= 33; i++) {
                    _redList.push(i);
                }
                for (let i = 1; i <= 16; i++) {
                    _blueList.push(i);
                }
            } else if (type === 'BigLotto') {
                for (let i = 1; i <= 35; i++) {
                    _redList.push(i);
                }
                for (let i = 1; i <= 12; i++) {
                    _blueList.push(i);
                }
            }
            generateLottery(type);
        }
        // 生成彩票并打印
        function generateLottery(type) {
            let redNum = 0;
            let blueNum = 0;
            reds = [];
            blues = [];

            if (type === 'BichromaticSphere') {
                redNum = 6;
                blueNum = 1;
            } else if (type === 'BigLotto') {
                redNum = 5;
                blueNum = 2;
            }
            drawLottery('red', _redList, redNum);
            drawLottery('blue', _blueList, blueNum);
            const _reds = format(reds.sort((a, b) => a - b));
            const _blues = format(blues.sort((a, b) => a - b));
            document.getElementById('slot').innerHTML =
                `<span style="color:red">${_reds.join(' ')}</span>&nbsp;+&nbsp;<span style="color:blue">${_blues.join(' ')}</span>`;
        }
    </script>
</body>

</html>